angular.module("ModalDirective", [])
	.directive("ngModal", function () {
		var tpl = '<div ng-class="{error: ngModel.error.e === true}" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
				tpl += '<div class="modal-dialog">';
					tpl += '<div class="modal-content">';
						tpl += '<div class="modal-header">';
							tpl += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
							tpl += '<h4 class="modal-title" id="myModalLabel">{{ngModel.titre}}</h4>';
						tpl += '</div>';
						tpl += '<div class="modal-body">';
							tpl += '<div class="main-body">';
								tpl += '{{ngModel.body}}';
							tpl += '</div>';
							tpl += '<div ng-class="{errorMessage: ngModel.error.e === true}">';
								tpl += '{{ngModel.error.message}}';
							tpl += '</div>';
						tpl += '</div>';
						tpl += '<div class="modal-footer">';	
							tpl += '<button type="button" class="btn btn-default" data-dismiss="modal">{{ngModel.buttons.quitter}}</button>';
							tpl += '<button ng-disabled="ngModel.error.e" type="button" class="btn btn-primary" ng-click=boutonValider()>{{ngModel.buttons.valider}}</button>';
						tpl += '</div>';
					tpl += '</div>';
				tpl += '</div>';
			tpl += '</div>';
		return {
			restrict: 'E',
			require: '^ngModel',/* ^ -- Look for the controller on parent elements, not just on the local scope */
			scope: {
				ngModel: '=',
				boutonValider: '&',      // Pass a reference to the method
			},
			template: tpl
		}
      });